<template>
    <div class="home">
        store.username:{{username}}
    </div>
    <div>
      <button @click="getFullNameHandle">获取全名</button>
      <button @click="changeName">修改名称</button>
      <button @click="toMap">查看地图</button>
    </div>

</template>
<script setup lang="ts">
import { storeToRefs } from 'pinia';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';
import appStore from '@/store';

// 响应化解构
const { username } = storeToRefs(appStore.userStore);
const { getFullName, updateUserName } = appStore.userStore;

// 直接修改store里面的状态
username.value = 'dddd';

const getFullNameHandle = () => {
  ElMessage.success(getFullName());
};

// 通过action改变状态
const changeName = () => {
  updateUserName('哈哈哈哈哈哈');
};

const router = useRouter();
const toMap = () => {
  router.push('/map');
};
</script>
<style lang="less">
    .home {
        background-color: red
    }
    .box {
      width: 100px;
      height: 50px;
      background-color: blue;
    }
</style>
